<template>
  <div class="app-container">
    <el-form style="margin-top: 10px">
      <el-form-item label="使用车型">
        <el-select clearable v-model="result" placeholder="点击选择使用车型" style="width:100%" @change="onConfirm">
					<el-option v-for="item in columns" :key="item.value" :value="item.value" :label="item.text"></el-option>
				</el-select>
      </el-form-item>

      <el-form-item label="车号">
        <el-select clearable v-model="result1" placeholder="点击选择车号" style="width:100%"  @change="onConfirm2">
					<el-option v-for="item in columns1" :key="item.value" :value="item.value" :label="item.text"></el-option>
				</el-select>
      </el-form-item>

      <el-form-item label="检查日期">
        <el-date-picker
          v-model="result2"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
          style="width:100%"
        />
      </el-form-item>

      <div style="margin: 16px;">
        <el-button round
                    block
                    type="primary"
                    @click="onSubmit">
          确定
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { inspectListNoPage, checkByWagonNumber } from '@/api/airport/inspect'
export default {
  name: "SelectMore123",
  components: {},
  props: {

  },
  computed: {},
  data () {
    return {
      result: '',
      result1: '',
      result2: '',

      result3: '',
      result4: '',

      num1: '',
      num2: '',
      num3: '',
      form: {
        inspectDate: '',
        flightNumber: '',
        machineNumber: '',
        stand: '',
        type: '',
      },
      showPicker: false,
      showPicker1: false,
      showPicker2: false,
      columns: [

      ],
      columns1: [

      ],

      a1: [],
      a3: [],
      a2: [],

      currentDate: ['2021', '01', '01'],

    };
  },
  created () {
    inspectListNoPage().then(res => {
      this.a1 = res.data;
      res.data.forEach((item, index) => {
        this.columns.push({
          text: item.applicableModels, value: index
        })
      });
      this.getToday();
    })
  },

  methods: {

    getToday () {

      var date = new Date();
      var Y = date.getFullYear().toString();
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1).toString();
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate().toString();
      var hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours().toString();
      var mm =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes().toString();
      var ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds().toString();

      this.currentDate = [Y, M, D];
      this.form.inspectDate = `${Y}-${M}-${D} ${hh}:${mm}:${ss}`;

    },


    onConfirm (value) {
      console.log(value);
      this.result3 = this.a1[value].applicableModels
      const temp = [];
      const num = value;
      this.a2 = this.a1[num].applicableModelsData;
      this.a3 = this.a1[num];
      this.a1[num].applicableModelsData.forEach((item, index) => {
        temp.push({
          text: item, value: index
        })
      })
      this.columns1 = temp;
    },
    onConfirm1 ({ selectedOptions }) {
      this.num2 = selectedOptions[0]?.value;
      this.result1 = selectedOptions[0]?.text;
      this.showPicker1 = false;
    },
    // onConfirm2 ({ selectedValues }) {
    //   this.result2 = selectedValues.join('-');
    //   this.showPicker2 = false;
    // },
     onConfirm2 (value) {
    //   this.result2 = selectedValues.join('-');
    //   this.showPicker2 = false;
       this.result4 = this.columns1[value].text
    },
    onSubmit () {
      const values = {
        type: this.result3,
        type1: this.result4,
        inspectDate: this.result2,
        localDate: this.result2,
      };
      const data = {
        chexing: values.type,
        wagonNumber: values.type1,
        inspectDate: values.inspectDate,
        id: this.a3.id,
        source: 'add',
        localDate: values.inspectDate,
      }
      checkByWagonNumber(data).then(res => {
        if (res.data) {
          this.$message.fail("此车号当日已检查")
        } else {
          this.$router.push({
            path: "/user/inform",
            query: data,
          });
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100vh;

  .app-page {
    width: 100%;
    height: calc(100% - 50px);
  }

  .app-footer {
    background-color: #f7f8fa;
    z-index: 2000;
  }
}
</style>
